<template>
  <div>
    <a-card direction="vertical" :size="12" fill title="原酒出库记录">
      <!-- 条件筛选 -->
      <div>
        <a-row>
          <a-col :flex="1">
            <a-form
              :model="formModel"
              :label-col-props="{ span: 6 }"
              :wrapper-col-props="{ span: 18 }"
              label-align="left"
              ref="searchFormRef"
            >
              <a-row :gutter="16">
                <a-col :span="8">
                  <a-form-item field="createdTime" label="出库酒罐">
                    <a-select
                      v-model="formModel.tank_id"
                      placeholder="请选择酒罐"
                      allow-clear
                    >
                      <a-option
                        v-for="item in tanktableData"
                        :key="item.id"
                        :value="item.id"
                        >{{ item.wine_tank_name }}</a-option
                      >
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="出库目标">
                    <a-select
                      v-model="formModel.out_target_id"
                      placeholder="请选择出库目标"
                      allow-clear
                    >
                      <a-option
                        v-for="item in targetList"
                        :key="item.id"
                        :value="item.id"
                        >{{ item.target_name }}</a-option
                      >
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item field="outTime" label="出库时间">
                    <a-range-picker
                      v-model="formModel.outTime"
                      style="width: 100%"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
          <a-divider style="height: 84px" direction="vertical" />
          <a-col :flex="'86px'" style="text-align: right">
            <a-space direction="vertical" :size="18">
              <a-button type="primary" @click="getGouduiOutWineList">
                <template #icon>
                  <icon-search />
                </template>
                {{ $t('searchTable.form.search') }}
              </a-button>
              <!-- <a-button @click="reset">
                <template #icon>
                  <icon-refresh />
                </template>
                {{ $t('searchTable.form.reset') }}
              </a-button> -->
            </a-space>
          </a-col></a-row
        >
      </div>
      <a-table
        :columns="columns"
        :data="tableData"
        :bordered="{ wrapper: true, cell: true }"
        :pagination="pagination"
        @page-change="handlePageChange"
      >
        <template #tank_name="{ record }">
          {{ getTankName(record.tank_id) }}
        </template>
        <template #target_name="{ record }">
          {{ getTargetName(record.out_target_id) }}
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { gouduiOutWineList } from '@/api/winepro';

const props = defineProps({
  getTankName: { type: Function },
  getTargetName: { type: Function },
  targetList: { type: Array },
  tanktableData: { type: Array },
});
const pagination = reactive({
  current: 1,
  total: 0,
  pageSize: 10,
});
const tableData = ref([]);
const getGouduiOutWineList = async (cuttent) => {
  let params = formModel;
  if (typeof cuttent === 'number' && cuttent) {
    params.current = cuttent;
  } else {
    params.current = 1;
  }
  pagination.current = params.current;
  params.begin_time = '';
  params.end_time = '';
  if (params.outTime && params.outTime.length > 0) {
    params.begin_time = params.outTime[0];
    params.end_time = params.outTime[1];
  }
  const { code, data } = await gouduiOutWineList(params);
  if (code === 200) {
    pagination.total = data.total;
    tableData.value = data.records;
  }
};
const handlePageChange = (page) => {
  getGouduiOutWineList(page);
};
const formModel = reactive({
  tank_id: '',
  out_target_id: '',
  current: 1,
  outTime: [],
});
getGouduiOutWineList();
const columns = ref([
  { title: '编号', align: 'center', dataIndex: 'id', width: 120 },
  { title: '酒罐名称', align: 'center', slotName: 'tank_name' },
  { title: '出库目标', align: 'center', slotName: 'target_name' },
  {
    title: '出库数量(公斤)',
    align: 'center',
    dataIndex: 'out_num',
  },
  { title: '出库时间', align: 'center', dataIndex: 'out_time' },
  // { title: '操作', align: 'center', dataIndex: 'tank_name', width: 120 },
]);

defineExpose({
  getGouduiOutWineList,
});
</script>